<template>
  <div>
    <el-card>
      <h2 style="text-align: center">实验室仪器设备借用单</h2>
      <el-form label-width="70px">
        <el-form-item label="借用部门" prop="borrow_department">
          <el-input v-model="approveForm.borrow_department" disabled></el-input>
        </el-form-item>
        <el-form-item label="借用用途" prop="borrow_application">
          <el-input
            v-model="approveForm.borrow_application"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="借用时间" prop="destine_start_time">
          <el-input
            v-model="approveForm.destine_start_time"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="借用人"
          prop="borrower_name"
          style="width: 45%; display: inline-block"
        >
          <el-input v-model="approveForm.borrower_name" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="电话号码"
          prop="borrower_phone"
          style="width: 45%; display: inline-block; margin-left: 40px"
        >
          <el-input v-model="approveForm.borrower_phone" disabled></el-input>
        </el-form-item>
        <h3>设备借用清单</h3>
        <el-table :data="equipmentList" border stripe height="140">
          <el-table-column label="设备名称" prop="equipment_name">
          </el-table-column>
          <el-table-column label="型号" prop="model"> </el-table-column>
          <el-table-column label="借用数量" prop="number"></el-table-column>
          <el-table-column label="附件" prop="annex"> </el-table-column>
        </el-table>
      </el-form>
      <el-form>
        <el-form-item label="审批结果:" style="margin-top: 20px">
          <div style="font-size: 22px; text-align: left; margin-left: 15px">
            {{ this.tableDataReason }}
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      approveForm: {},
      equipmentList: [],
      tableDataReason: {},
    };
  },
  created() {
    this.getuserlist();
  },
  methods: {
    async getuserlist() {
      const { data: res } = await this.$http.post(
        "/api/student/selectequipmentborrow",
        {
          form_id: sessionStorage.getItem("EquipmentList"),
        }
      );
      console.log(res);
      console.log("------------------");
      this.approveForm = res.data;
      const { data: re } = await this.$http.post(
        "/api/student/selectequipmentlist",
        {
          form_id: sessionStorage.getItem("EquipmentList"),
        }
      );
      console.log(re);
      this.equipmentList = re.data;
      this.tableDataReason=sessionStorage.getItem('reason')
    },
  },
};
</script>
<style scoped>
.el-card {
  width: 60%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>